<template>
  <div>
      <el-button-group class='arrow-container'>
        <el-button text @click='moveRow(0)'><img :src='UpToTop' :width='$store.state.style.pngWidth' :height='$store.state.style.pngHeight'><span class='arrow-word'>置顶</span></el-button>
        <el-button text @click='moveRow(1)'><img :src='ArrowUp' :width='$store.state.style.pngWidth' :height='$store.state.style.pngHeight'><span class='arrow-word'>上移</span></el-button>
        <el-button text @click='moveRow(2)'><img :src='ArrowDown' :width='$store.state.style.pngWidth' :height='$store.state.style.pngHeight'><span class='arrow-word'>下移</span></el-button>
        <el-button text @click='moveRow(3)'><img :src='DownToBottom' :width='$store.state.style.pngWidth' :height='$store.state.style.pngHeight'><span class='arrow-word'>置底</span></el-button>
      </el-button-group>

      <el-table :data="tableData" border style="width: 100%" @cell-dblclick='handleCellDblClick' @row-click='handleRowClick'
                :current-row-key='currentRowKey' highlight-current-row row-key='iid' :key='tableKey'>
        <el-table-column type="index" align="center" label='序号' :width="$store.state.style.seqColumnWidth" />
        <template v-for='(item, index) in tableStyle' :key='index'>
          <template v-if='item.visible'>
            <el-table-column :prop="item.fieldName" :label="item.cn" :width="item.widthPx" >
              <template #default='scope'>
                <!-- 编辑模式 -->
                <template v-if=' !item.immutable && scope.row.iid == dblPK'>
                  <template v-if='item.ctlType === "checkbox"'>
                    <el-checkbox v-model='scope.row[item.fieldName]' size='large'/>
                  </template>
                  <el-input v-else v-model='scope.row[item.fieldName]' @dblclick.prevent.stop></el-input>
                </template>
                <!-- 显示模式 -->
                <template v-else>
                  <template v-if='item.ctlType === "checkbox"'>
                    {{ scope.row[item.fieldName] ? '√' : '×' }}
                  </template>
                  <span v-else>{{ scope.row[item.fieldName] }}</span>
                </template>

              </template>
            </el-table-column>
          </template>
        </template>
        <el-table-column width='auto'></el-table-column>
      </el-table>

      <div class='btn-container'>
        <el-button type='primary' @click='save'>保存</el-button>
        <el-button type='default' @click='cancel'>取消</el-button>
      </div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { useStore } from 'vuex'
import ArrowDown from '~/assets/icon/arrow/arrow_down.png'
import ArrowUp from '~/assets/icon/arrow/arrow_up.png'
import DownToBottom from '~/assets/icon/arrow/down_to_bottom.png'
import UpToTop from '~/assets/icon/arrow/up_to_top.png'
import { getRowIndexInObjArray } from '~/utils/arrayUtils'
import { useToast } from 'vue-toastification'

const props = defineProps({
  tableName: {
    type: String,
    required: true
  }
})

const emits = defineEmits(['save', 'cancel'])

const toast = useToast()
const styleTableName = 'table_style'
const store = useStore()
let tableData = reactive([])
const tableStyle = ref([])
const dblPK = ref(0)
const currentRowKey = ref(null)
const tableKey = ref(Math.random())

const getTableData = () => {
  const data = store.state.system.tableStyles.filter(item => item.tableName === props.tableName)
  data.sort((a, b) => {
    return a.seq - b.seq
  })
  tableData = data
}

const getTableStyle = () => {
  tableStyle.value = store.state.system.tableStyles.filter(item => item.tableName === styleTableName)
}

const refresh = () => {
  getTableStyle()
  getTableData()
}

const handleCellDblClick = (row, column, cell, event) => {
  dblPK.value = row.iid
}

const resetSeq = () => {
  let i = 0
  for (const tableDatum of tableData) {
    i++
    tableDatum.seq = i
  }
}

const save = () => {
  resetSeq()
  store.dispatch('system/updateTableStyle', tableData).then(res => {
    if(res.code !==1) return
    getTableData()
    dblPK.value = 0
    emits('save')
  })
}

const cancel = () => {
  dblPK.value = 0
  emits('cancel')
}

const resetDblPk = () => {
  dblPK.value = 0
}

const handleRowClick = (row, column, event) => {
  currentRowKey.value = row.iid
}

const moveRow = (direction) => {
  const rowIndex = getRowIndexInObjArray(tableData, 'iid', currentRowKey.value)
  if(rowIndex === 0 && direction === 1){
    toast.warning('第一行无法继续上移！')
    return
  }

  if(rowIndex === (tableData.length-1) && direction === 2){
    toast.warning('最后一行无法继续下移！')
    return
  }

  if(rowIndex === 0 && direction === 0){
    toast.warning('已经是第一行！')
    return
  }

  if(rowIndex === (tableData.length-1) && direction === 3){
    toast.warning('已经是最后一行！')
    return
  }


  const currentRow = tableData.splice(rowIndex, 1)[0]
  switch (direction){
    case 0:// 置顶
      tableData.splice(0, 0, currentRow)
      break
    case 1:// 上移
      tableData.splice(rowIndex-1, 0, currentRow)
      break
    case 2:// 下移
      tableData.splice(rowIndex+1, 0, currentRow)
      break
    case 3:// 置底
      tableData.splice(tableData.length, 0, currentRow)
      break
    default:
  }
  tableKey.value = Math.random()
}

refresh()

defineExpose({resetDblPk})
</script>
<style scoped>
.arrow-container {
  margin-bottom: 10px;
}

.btn-container {
  margin-top: 10px;
  @apply flex items-center justify-end;
}
</style>